import {
    useEffect,
    useMemo,
    useState
} from 'react';
import { createPortal } from 'react-dom';
import { getComponentById, useComponetsStore } from '../../store/components';

// 悬停遮罩属性接口定义
interface HoverMaskProps {
  portalWrapperClassName: string;  // Portal 容器的类名
  containerClassName: string       // 编辑区容器的类名
  componentId: number;             // 当前悬停的组件ID
}

function HoverMask({ containerClassName, portalWrapperClassName, componentId }: HoverMaskProps) {

  // 存储遮罩和标签的位置信息
  const [position, setPosition] = useState({
    left: 0,
    top: 0,
    width: 0,
    height: 0,
    labelTop: 0,
    labelLeft: 0,
  });

  // 获取组件列表数据
  const { components } = useComponetsStore();

  // 当组件ID变化时更新位置
  useEffect(() => {
    updatePosition();
  }, [componentId]);

  useEffect(() => {//组件本身变化也更新（比如大小变化了）
    updatePosition();
  }, [components]);

  /**
   * 更新遮罩和标签的位置
   * 根据目标组件的位置和容器的位置计算遮罩应该显示的位置
   */
  function updatePosition() {
    if (!componentId) return;

    // 获取编辑区容器元素
    const container = document.querySelector(`.${containerClassName}`);
    if (!container) return;

    // 获取目标组件元素
    const node = document.querySelector(`[data-component-id="${componentId}"]`);
    if (!node) return;

    // 获取元素的位置和尺寸信息
    const { top, left, width, height } = node.getBoundingClientRect();
    const { top: containerTop, left: containerLeft } = container.getBoundingClientRect();

    // 计算标签的位置
    let labelTop = top - containerTop + container.scrollTop;
    const labelLeft = left - containerLeft + width;

    // 确保标签不会超出顶部边界
    if (labelTop <= 0) {
      labelTop -= -20;
    }
  
    // 更新位置状态
    setPosition({
      top: top - containerTop + container.scrollTop,
      left: left - containerLeft + container.scrollTop,
      width,
      height,
      labelTop,
      labelLeft,
    });
  }

  // 获取Portal容器元素
  const el = useMemo(() => {
      return document.querySelector(`.${portalWrapperClassName}`)!
  }, []);

  // 获取当前悬停的组件信息
  const curComponent = useMemo(() => {
    return getComponentById(componentId, components);
  }, [componentId]);

  // 使用Portal将遮罩渲染到指定容器中
  return createPortal((
    <>
      {/* 组件边框遮罩 */}
      <div
        style={{
          position: "absolute",
          left: position.left,
          top: position.top,
          backgroundColor: "rgba(0, 0, 255, 0.05)",
          border: "1px dashed blue",
          pointerEvents: "none",  // 防止遮罩拦截鼠标事件
          width: position.width,
          height: position.height,
          zIndex: 12,
          borderRadius: 4,
          boxSizing: 'border-box',
        }}
      />
      {/* 组件名称标签 */}
      <div
          style={{
            position: "absolute",
            left: position.labelLeft,
            top: position.labelTop,
            fontSize: "14px",
            zIndex: 13,
            display: (!position.width || position.width < 10) ? "none" : "inline",
            transform: 'translate(-100%, -100%)',
          }}
        >
          <div
            style={{
              padding: '0 8px',
              backgroundColor: 'blue',
              borderRadius: 4,
              color: '#fff',
              cursor: "pointer",
              whiteSpace: 'nowrap',
            }}
          >
            {curComponent?.desc}
          </div>
        </div>
    </>
  ), el)
}

export default HoverMask;
